import React, { useState, useEffect } from "react";
import { Modal, Form, Button, Input, Switch , Select, message, Space, Tooltip } from "antd";
import { HcpIconSelect } from "@/components";
import { QuestionCircleFilled } from "@ant-design/icons";
import cmdbres from "@/data/cmdbres";
import request from "@/utils/request";
import regexpUtil from "@/utils/regexpUtil";
import hcpUtils from "@/utils/hcpUtils";

const user = hcpUtils.getUser();
const { commonNameRegexp, commonCodeRegexp } = regexpUtil;
const CreateModel = ({ visible, setVisible, onCreateFinish, info, namespace}) => {
	const [form] = Form.useForm();
	const [loading, setLoading] = useState(false);

	const onFinish = async (values) => {
		setLoading(true);
		let res = await request({
			...cmdbres.createModel,
			data: {
				namespace: 'default',
				moduleClassificationId: info.id,
				moduleCode: values.moduleCode,
				moduleName: values.moduleName,
				moduleIcon: values.moduleIcon,
				moduleDefinitionType: "customize",
				author: user.staffName,
				isAccessProduct: values.isAccessProduct ? 1 : 0
			}
		});
		setLoading(false);
		if (res && res.code == 200) {
			setVisible(false);
			message.success("新增模型成功！");
			if (typeof onCreateFinish == "function") onCreateFinish(res);
		} else {
			if(res) message.error(res.msg);
		}
	};

	const changeGroup = (value) => {
		setSelectGroupValue(value)
	}

    const changeKind = (value) => {
		setSelectKindValue(value)
	}

	const onCancel = () => {
		setVisible(false);
	}

	return (
		<div>
			<Modal
				title="新建模型"
				className="hcp-modal-sm"
				visible={visible}
				footer={null}
				onCancel={onCancel}
				destroyOnClose
				maskClosable={false}
				afterClose={()=>{form.resetFields()}}
			>
				<Form
					form={form}
					labelCol={{ span: 5 }}
					wrapperCol={{ span: 18 }}
					name="basic"
					onFinish={onFinish}
				>
					<Form.Item label="模型名称" required>
						<Form.Item 
							name="moduleName" 
							noStyle
							rules={[ commonNameRegexp(1, 100, '模型名称')]}
						>
							<Input placeholder="请输入名称" maxLength={100} style={{width: '90%'}}/>
						</Form.Item>
						<Tooltip
							placement="right"
							title="模型名称不能为空,只允许包含1-100位中文、英文、数字及常用字符"
						>
							<QuestionCircleFilled style={{ fontSize: '16px', lineHeight: '32px', marginLeft: '10px' }}/>
						</Tooltip>
					</Form.Item>
					<Form.Item label="唯一标识" required>
						<Form.Item 
							name="moduleCode"
							noStyle
							rules={[commonCodeRegexp(1,100)]}
							style={{ marginBottom: 5 }}
						>
							<Input placeholder="请输入唯一标识" maxLength={100} style={{width: '90%'}}/>
						</Form.Item>
						<Tooltip
							placement="right"
							title="唯一标识不能为空,只允许包含1-100位英文、数字、下划线、短横线和点"
						>
							<QuestionCircleFilled style={{ fontSize: '16px', lineHeight: '32px', marginLeft: '10px' }}/>
						</Tooltip>
					</Form.Item>
					{/* <Form.Item
						label="模型类型"
						name="moduleDefinitionType"
						key="moduleDefinitionType"
						rules={[{required: true,message: '请选择关系类型'}]}
					>
						<Select
							placeholder="请选择"
							style={{ width: "100%", marginRight: 10 }}
						>
							{
								[{name: '系统内置', code: 'inner'},
								{name: '用户自定义', code: 'customize'}].map((item, index) => (
									<Select.Option
										key={item.code}
										value={item.code}
									>
										{item.name}
									</Select.Option>
								))
							}
						</Select>
                	</Form.Item> */}
					<Form.Item
						name="moduleIcon"
						label="图标"
						rules={[ { required: true, message: '请选择图标' }]}
					>
						<HcpIconSelect placeholder="点击选择图标" style={{width: '90%'}}/>
					</Form.Item>
					<Form.Item
						label="接入产品"
						name="isAccessProduct"
						required
						initialValue={false}
						valuePropName="checked"
					>
						<Switch
							checkedChildren="是"
							unCheckedChildren="否"
						/>
					</Form.Item>
					<div className="hcp-modal-body-footer">
						<Form.Item wrapperCol={{ span: 24 }} >
							<Button onClick={onCancel}>取消</Button>
							<Button type="primary" htmlType="submit" loading={loading}>确认</Button>
						</Form.Item>
					</div>
				</Form>
			</Modal>
		</div>
	)
}

export default CreateModel;